<template>
  <div class="status-bar" :class="statusClass">
    <div class="status-info">
      <span class="status-badge">{{ status }}</span>
      <span class="status-text">工单号：{{ workOrderId }}</span>
    </div>
    <div class="action-group">
      <el-button-group>
        <el-button size="medium" @click="$emit('save-draft')" icon="el-icon-document">
          保存草稿
        </el-button>
        <el-button size="medium" @click="$emit('print')" icon="el-icon-printer">
          打印工单
        </el-button>
      </el-button-group>
      <el-button 
        type="primary" 
        size="medium"
        :loading="submitting"
        @click="$emit('submit')"
        icon="el-icon-check"
        class="submit-btn">
        提交工单
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkOrderHeader',
  props: {
    status: {
      type: String,
      required: true
    },
    workOrderId: {
      type: String,
      required: true
    },
    submitting: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    statusClass() {
      return {
        'status-pending': this.status === '待处理',
        'status-processing': this.status === '处理中',
        'status-completed': this.status === '已完成'
      }
    }
  }
}
</script>

<style scoped>
.status-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-bar.status-pending {
  background: #fff;
  border-left: 4px solid #f56c6c;
}

.status-bar.status-processing {
  background: #fff;
  border-left: 4px solid #409EFF;
}

.status-bar.status-completed {
  background: #fff;
  border-left: 4px solid #67c23a;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  background: #f4f4f5;
  color: #606266;
}

.status-pending .status-badge {
  background: #fef0f0;
  color: #f56c6c;
}

.status-processing .status-badge {
  background: #ecf5ff;
  color: #409EFF;
}

.status-completed .status-badge {
  background: #f0f9eb;
  color: #67c23a;
}

.status-text {
  color: #606266;
  font-size: 14px;
}

.action-group {
  display: flex;
  gap: 12px;
}
</style> 